<script lang="ts" setup>
  import { computed, getCurrentInstance, inject, onBeforeMount, ref } from "vue";
  import { buildStyles, getSize } from "../utils";

  interface MenuItemProps {
    direction?: "horizontal" | "vertical";
  }

  const props = withDefaults(defineProps<MenuItemProps>(), {
    direction: "horizontal",
  });
  const instance = getCurrentInstance();
  const menuKeys = inject<any>("menuKeys");
  const iconTextGap = inject<any>("iconTextGap");
  const activedKey = inject<any>("activedKey");
  const menuItemkey = ref("");

  onBeforeMount(() => {
    if (instance && instance.vnode.key) {
      menuKeys.value?.push(instance.vnode.key);
      menuItemkey.value = instance.vnode.key.toString();
    }
  });

  const classNames = computed(() => {
    return {
      "umrp-menu-item": true,
      "umrp-menu-item-actived": menuItemkey.value === activedKey.value,
      "umrp-menu-item-vertical": props.direction === "vertical",
    };
  });

  const styles = buildStyles(() => {
    return {
      gap: getSize(iconTextGap),
    };
  });

  const handleSelect = () => {
    activedKey.value = menuItemkey.value;
  };
</script>

<template>
  <div :class="classNames" @click="handleSelect" :style="styles">
    <div class="icon">
      <icon-all-application :size="14" theme="filled" fill="#999999" />
    </div>
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
  .umrp-menu-item {
    display: flex;
    align-items: center;
    color: #333;
    gap: 8px;
    padding: 12px 8px;
    font-size: 16px;
    line-height: 16px;

    .icon {
      width: 16px;
    }

    &-vertical {
      flex-direction: column;
    }

    &-actived {
      color: #1890ff;
      background-color: rgb(242, 243, 245);
    }
  }
</style>
